@extends('layouts.app', ['activePage' => 'clubcheck', 'titlePage' => __('俱乐部成员管理')])
@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title">俱乐部成员管理</h4>
        </div>

        <div class="card-body ">

          @if (session('message'))
            <div class="row">
              <div class="col-sm-12">
                <div class="alert alert-success">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="material-icons">close</i>
                  </button>
                  <span>{{ session('message') }}</span>
                </div>
              </div>
            </div>
          @endif
          <div class="row justify-content-between">
            <div class="col-md-auto mr-auto">
              <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link" href="?type=0">新申请({{$countStatus0}})</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="?type=1">所有成员({{$countStatus1}})</a>
                </li>
              </ul>
            </div>
            <div class="col-auto">
              <form class="navbar-form navbar-search" method="get">
                <div class="input-group no-border">
                  <input type="text" name="search" class="form-control" placeholder="搜索...">
                  <button type="submit" class="btn btn-white btn-round btn-just-icon">
                    <i class="material-icons">search</i>
                    <div class="ripple-container"></div>
                  </button>
                </div>
              </form>
            </div>
          </div>
          <table class="table">
            <thead>
            <tr class="text-center text-primary">
              <th class="text-center">编号</th>
              <th>头像</th>
              <th>用户名</th>
              <th>性别</th>
              <th class="text-right">操作</th>
            </tr>
            </thead>
            @foreach ($list as $item)
              <tbody>
              <tr class="text-center" id="item-{{ $item->id }}">
                <td class="text-center">{{ $loop->iteration }}</td>
                <td><img src="{{ $item->user->photo }}" class="mx-auto d-block" width="50px" height="50px"></td>
                <td>{{ $item->user->username }}</td>
                <td>{{ $item->user->gender?'男':'女' }}</td>
                <td class="td-actions text-right">
                  @switch($item->status)
                    @case(0)
                    <a rel="tooltip" class="btn btn-success btn-link btn-item-status" href="javascript:"
                       data-set-item-status=1 data-item-id={{ $item->check_id }}>
                      通过
                      <div class="ripple-container"></div>
                    </a>
                    <a rel="tooltip" class="btn btn-success btn-link btn-item-status" href="javascript:"
                       data-set-item-status=2 data-item-id={{ $item->check_id }}>
                      拒绝
                      <div class="ripple-container"></div>
                    </a>
                    @break
                    @case(1)
                    <a rel="tooltip" class="btn btn-success btn-link btn-item-status" href="javascript:"
                       data-set-item-status=2 data-item-id={{ $item->check_id }}>
                      移除
                      <div class="ripple-container"></div>
                    </a>
                    @break
                  @endswitch
                </td>
              </tr>
              </tbody>
            @endforeach

          </table>

        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
      $('.btn-item-status').on('click', function () {
          let id = $(this).attr('data-item-id');
          let status = $(this).attr('data-set-item-status');
          axios.patch(`/clubcheck/${id}`, {
              status: status
          }).then(res => {
              if (res.status === 200)
                  location.reload();
              else
                  reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
          }).catch(e => console.log(e));
      });
  </script>
@endpush
